<template>
  <view class="cancellation-container">
    <view
      class="singal_icon"
      :style="{
        backgroundImage: `url(${oss2('personal/logout_singal.png')})`,
      }"
    >
    </view>
    <view class="title"> 将 {{ phoneNum }} 所绑定的会员账户注销</view>

    <view class="content w-336px">
      <view class="content_title">注销后以下信息将被清空且无法找回</view>
      <view class="content_text"> - 1. 个人资料信息</view>
      <view class="content_text"> - 2. 会员账户权益、优惠券、积分等 </view>
      <view class="content_text"> - 3. 订单信息及活动信息</view>
    </view>

    <view class="notice w-336px">
      <view class="notice_text">请确保所有交易己完结且无纠纷</view>
      <!-- <view class="notice_text">XXXXXXXXXXXXXXX</view> -->
    </view>

    <view class="agree flex items-center justify-center">
      <radio
        style="transform: scale(0.6)"
        color="#0058C6"
        :value="iAgree"
        :checked="iAgree"
        @click="iAgree = !iAgree"
      />
      <view>
        我已充分阅读、理解并同意
        <span class="agree_title" @click="toPage">《奥利奥隐私声明》</span>
      </view>
    </view>

    <view class="bottom_btn" @click.stop="openDialog">注销账户</view>
  </view>

  <view class="confirm_dialog" v-if="confirmDialog">
    <view
      class="confirm_bg h-200px"
      :style="{
        backgroundImage: `url(${oss2('personal/confirm_card_bg.png')})`,
      }"
    >
      <view class="Dialog_title">
        {{ dialogType === 0 ? "是否注销" : "注销成功" }}
      </view>
      <view class="Dialog_content">
        <label v-if="dialogType === 0">会员账户注销后</label>
        <label v-if="dialogType === 0">无法恢复，请确认</label>
        <label v-if="dialogType === 1">
          注销成功，点击右上角 ◎可关闭小程序 小奥期待下一次与您相遇~
        </label>
      </view>

      <view class="Dialog_btn" v-if="dialogType === 0">
        <view class="confirm" @click.stop="submit()">确认</view>
        <view class="cancel" @click="confirmDialog = false">返回</view>
      </view>
      <view
        class="Dialog-btn finish_btn"
        v-if="dialogType === 1"
        @click.stop="determine()"
      >
        确认
      </view>
    </view>
  </view>

  <view class="confirm_dialog" v-if="errorDialog">
    <view
      class="confirm_bg h-300px"
      :style="{
        backgroundImage: `url(${oss2('personal/error_card_bg.png')})`,
      }"
    >
      <view class="Dialog_title"> 注销失败 </view>
      <view class="Dialog_content Dialog_content_error">
        <label class="error_text">
          您可能有以下履约行为 （1项或多项）， 请结束履约行为后再次申请注销。
        </label>
        <label>- 1. 末完成的订单信息 </label>
        <label>- 2. 未完成的售后信息 </label>
        <label>- 3. 订单创建30天内 </label>
      </view>

      <view class="error_info">
        *订单包含商城订单，玩心FUN享卡订单、积分订单等。
        如有问题，请联系小程序客服。
      </view>

      <view class="Dialog-btn error_btn" @click.stop="errorDialog = false">
        确认
      </view>
    </view>
  </view>

</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { cancelMember } from "@/services/vip";
import { oss2, message } from "@/utils/utils";
import privacyPopup from "@/components/privacy-popup";

const phoneNum = ref("");
const iAgree = ref(false);
const confirmDialog = ref(false);
const dialogType = ref(0);

const errorDialog = ref(false);

onShow(async () => {
  getApp().accessLogAdd();
  phoneNum.value = getApp().globalData.user.phone || "";
});

const openDialog = () => {
  if (!iAgree.value) return message("请先同意相关协议!");
  dialogType.value = 0;
  confirmDialog.value = true;
};

const submit = async () => {
  const res = await cancelMember({
    memberId: null,
    reason: "其他",
  });
  if (res?.code === 200) {
    uni.clearStorageSync();
    getApp().globalData.user = {};

    dialogType.value = 1;
  } else if (res?.code === 422) {
    errorDialog.value = true;
    confirmDialog.value = false;
  }
};

const determine = () => {
  getApp().globalData.user = {}
  uni.clearStorageSync()
  uni.switchTab({
    url: "/pages/home/home",
  });
};

const toPage = () => {
  uni.navigateTo({ url: "/pages/privacyPolicy/index" });
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.cancellation-container {
  width: 100%;
  min-height: 664px;
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 19px 18px;
  font-family: FZLanTingYuanS-R-GB;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  .singal_icon {
    width: 108px;
    height: 108px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 108px 108px;
    margin: 0 auto;
  }
  .title {
    width: 100%;
    height: 19px;
    line-height: 19px;
    font-size: 18px;
    font-weight: 500;
    color: #2643ab;
    text-align: center;
    margin-top: 36px;
  }

  .content {
    height: 153px;
    box-sizing: border-box;
    padding: 19px 0 0 8px;
    border-bottom: 1px solid #b6c0d4;
    line-height: 14px;
    .content_title {
      margin-bottom: 29px;
      color: #222222;
    }
    .content_text {
      margin-top: 14px;
    }
  }
  .notice {
    box-sizing: border-box;
    padding: 18px 0 0 9px;
    .notice_text {
      line-height: 20px;
    }
  }
  .agree {
    position: absolute;
    bottom: 93px;
    height: 13px;
    width: 336px;
    font-size: 12px;
    .agree_title {
      color: #0058c6;
    }
  }
  .bottom_btn {
    position: absolute;
    bottom: 19px;
    left: 18px;
    width: 340px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #0058c6;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
  }
}

.confirm_dialog {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.63);
  font-family: FZLanTingYuanS-R-GB;
  font-weight: 400;
  .confirm_bg {
    position: absolute;
    top: 30vh;
    left: 45px;
    width: 285px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 285px 100%;
    box-sizing: border-box;
    padding: 30px 35px 20px;
    text-align: center;
    .Dialog_title {
      font-size: 19px;
      color: #005dc9;
      margin-bottom: 19px;
    }
    .Dialog_content {
      font-size: 12px;
      color: #000000;
      line-height: 18px;
      label {
        display: block;
      }
    }
    .Dialog_content_error {
      label {
        text-align: left;
      }
      .error_text {
        margin-bottom: 12px;
      }
    }
    .error_info {
      font-size: 10px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #005dc9;
      margin-top: 27px;
    }
    .Dialog_btn {
      position: absolute;
      bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 215px;
      height: 32px;
      view {
        width: 86px;
        height: 32px;
        border-radius: 16px;
        box-sizing: border-box;
        border: 2px solid #0058c6;
        font-size: 19px;
        font-weight: 400;
        line-height: 28px;
      }
      .confirm {
        background: #ffffff;
        color: #0058c6;
      }
      .cancel {
        background: #0058c6;
        color: #fff;
      }
    }
    .Dialog-btn {
      width: 197px;
      height: 32px;
      line-height: 32px;
      border-radius: 16px;
      text-align: center;
      background-color: #fff;
      border: solid 1.5rpx #0058c6;
      color: #0058c6;
      margin: 0 auto;
    }
    .finish_btn {
      margin-top: 33px !important;
    }
    .error_btn {
      margin-top: 12px !important;
    }
  }
}
</style>
